<template>
  <div class="video-player">
    <div id="container" ref="container"></div>
  </div>
</template>
<script>

export default {
  name: "VideoPlayer",
  props: {},
  data() {
    return {
      jessibuca: null,
      version: '',
      wasm: false,
      vc: "ff",
      playing: false,
      quieting: true,
      loaded: false, // mute
      showOperateBtns: true,
      showBandwidth: true,
      err: "",
      speed: 0,
      performance: "",
      volume: 1,
      rotate: 0, // 旋转角度
      useWCS: false,
      useMSE: true,
      recording: false,
      recordType: 'webm', // mp4
      scale: 0,
      videoText: "视频播放",
    };
  },
  mounted() {
    this.init();
    window.onerror = (msg) => (this.err = msg);
  },
  beforeDestroy() {
    if (this.jessibuca) {
      this.jessibuca.destroy();
      this.jessibuca = null;
    }
  },
  methods: {
    init(options) {
      options = options || {};
      this.jessibuca = new window.Jessibuca(
        Object.assign(
          {
            container: this.$refs.container,
            videoBuffer: 0.2, // 缓冲时长(秒)
            decoder: "./lib/jessibuca/decoder.js", // 这里 ./ 是相对路径，使用绝对路径：/video/lib/jessibuca/decoder.js
            isResize: false,
            // useWCS: this.useWCS, // 是否开启Webcodecs硬解码，视频编码只支持H.264视频，如果同时设置了useMSE:true，则优先使用useMSE
            // useMSE: this.useMSE, // 是否开启MediaSource硬解码，视频编码只支持H.264视频
            text: this.videoText,
            // background: "bg.jpg", // 背景图片
            loadingText: "视频加载中...", // 加载过程中文案
            // hasAudio:false,
            debug: false,
            // supportDblclickFullscreen: true, // 屏幕的双击事件，触发全屏，取消全屏事件
            timeout: 20,
            heartTimeout: 15,
            heartTimeoutReplay: false,
            showBandwidth: this.showBandwidth, // 显示网速
            // keepScreenOn: true, // 开启屏幕常亮，PC端不会生效，仅手机端生效
            useWebFullScreen: true, // 是否使用web全屏(旋转90度)（只会在移动端生效）
            operateBtns: {
              fullscreen: this.showOperateBtns, // 全屏按钮
              // screenshot: this.showOperateBtns, // 截图按钮
              play: this.showOperateBtns, // 播放暂停按钮
              audio: this.showOperateBtns, // 声音按钮
              // record: this.showOperateBtns, // 录制按钮
            },
            controlAutoHide: false, // 底部控制台是否自动隐藏
            isNotMute: false, // 是否开启声音，默认是关闭声音播放的
            // timeout: 10, // 超时时长，单位秒
          },
          options
        )
      );
      var _this = this;
      this.jessibuca.on("load", function () {
        console.log("on load");
      });

      this.jessibuca.on("log", function (msg) {
        console.log("on log", msg);
      });
      this.jessibuca.on("record", function (msg) {
        console.log("on record:", msg);
      });
      this.jessibuca.on("pause", function () {
        console.log("on pause");
        _this.playing = false;
      });
      this.jessibuca.on("play", function () {
        console.log("on play");
        _this.playing = true;
      });
      this.jessibuca.on("fullscreen", function (msg) {
        console.log("on fullscreen", msg);
      });

      this.jessibuca.on("mute", function (msg) {
        console.log("on mute", msg);
        _this.quieting = msg;
      });

      this.jessibuca.on("mute", function (msg) {
        console.log("on mute2", msg);
      });

      this.jessibuca.on("audioInfo", function (msg) {
        console.log("audioInfo", msg);
      });

      // this.jessibuca.on("bps", function (bps) {
      //   // console.log('bps', bps);
      // });
      // let _ts = 0;
      // this.jessibuca.on("timeUpdate", function (ts) {
      //     console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
      //     _ts = ts;
      // });

      this.jessibuca.on("videoInfo", function (info) {
        console.log("videoInfo", info);
      });

      this.jessibuca.on("error", function (error) {
        console.log("error", error);
      });

      this.jessibuca.on("timeout", function () {
        console.log("timeout");
      });

      this.jessibuca.on('start', function () {
        console.log('frame start');
      })

      this.jessibuca.on("performance", function (performance) {
        var show = "卡顿";
        if (performance === 2) {
          show = "非常流畅";
        } else if (performance === 1) {
          show = "流畅";
        }
        _this.performance = show;
      });
      this.jessibuca.on('buffer', function (buffer) {
        console.log('buffer', buffer);
      })

      this.jessibuca.on('stats', function (stats) {
        console.log('stats', stats);
      })

      this.jessibuca.on('kBps', function (kBps) {
        console.log('kBps', kBps);
      });

      this.jessibuca.on("play", () => {
        this.playing = true;
        this.loaded = true;
        this.quieting = this.jessibuca.isMute();
      });

      this.jessibuca.on('recordingTimestamp', (ts) => {
        console.log('recordingTimestamp', ts);
      })
      // console.log(this.jessibuca);
    },
    play(val) {
      // this.jessibuca.onPlay = () => (this.playing = true);
      if (val) {
        this.jessibuca.play(val);
      }
    },
    mute() {
      this.jessibuca.mute();
    },
    cancelMute() {
      this.jessibuca.cancelMute();
    },
    pause() {
      this.jessibuca.pause();
      this.playing = false;
      this.err = "";
      this.performance = "";
    },
    volumeChange() {
      this.jessibuca.setVolume(this.volume);
    },
    rotateChange() {
      this.jessibuca.setRotate(this.rotate);
    },
    async destroy() {
      if (this.jessibuca) {
        await this.jessibuca.destroy();
      }
      this.init();
      this.playing = false;
      this.loaded = false;
      this.performance = "";
    },
    fullscreen() {
      this.jessibuca.setFullscreen(true);
    },
    clearView() {
      this.jessibuca.clearView();
    },
    startRecord() {
      const time = new Date().getTime();
      this.jessibuca.startRecord(time, this.recordType);
    },
    stopAndSaveRecord() {
      this.jessibuca.stopRecordAndSave();
    },
    screenShot() {
      this.jessibuca.screenshot();
    },
    changeBuffer(val) {
      this.jessibuca.setBufferTime(Number(val));
    },
    scaleChange() {
      this.jessibuca.setScaleMode(this.scale);
    },
  },
};
</script>

<style>
#container {
  background: rgba(13, 14, 27, 0.7);
  height: 320px;
}
</style>